<template>
    <el-form label-suffix=":" v-loading="loading"  :model="formData" :rules="editable ? formRules : {}" ref="formRef" label-width="120px">
        <vp-card>
            <template #header>
                <vp-label zh="基础信息" en="Basic Information"/>
            </template>
            <el-row>
                <vp-col :span="4">
                    <el-form-item prop="bh">
                        <template #label><vp-label zh="报告编号" en="Report No."/></template>
                        <el-input 
                            v-if="editable"
                            v-model="formData.bh"
                            maxlength="100"
                            placeholder="不填写则自动生成"
                        />
                        <span v-else>{{formData.bh}}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="sjrq">
                        <template #label><vp-label zh="报告日期" en="Report Date"/></template>
                        <el-date-picker 
                            v-if="editable" 
                            v-model="formData.sjrq" 
                            type="date" 
                            value-format="YYYY-MM-DD" 
                            class="w100"
                        />
                        <span v-else>{{formData.sjrq}}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="fjjx">
                        <template #label><vp-label zh="机型" en="A/C Type"/></template>
                       <VpAircraftTypeSelect
                            v-if="editable" 
                            :selectedId="formData.fjjx" 
                            :fjjx="true"
                            class="w100"
                            @selected="chooseAcType"
                        />
                        <span v-else>{{formData.fjjx}}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="fjid">
                        <template #label><vp-label zh="机号" en="A/C REG"/></template>
                        <AircraftSelect 
                            v-if="editable" 
                            :selectedId="formData.fjzch" 
                            :fjjx="true"
                            @aircraftSelected="chooseAircraft" 
                            :jx="formData.fjjx"
                            class="w100"
                        />
                        <span v-else>{{formData.fjzch}}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="sfdid">
                        <template #label><vp-label zh="事发地点" en="Incident Location"/></template>
                        <el-input v-if="editable" readonly v-model="formData.sfdmc">
                            <template #append>
                                <el-button @click="searchBaseAndAirport"><SvgIcon name="ele-Search"/></el-button>
                            </template>
                        </el-input>
                        <span v-else>{{formData.sfdmc}}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4" v-if="type !== 'add'">
                    <el-form-item prop="whrmc">
                        <template #label><vp-label zh="维护人" en="Editor"/></template>
                        <span>{{formData.whrmc}}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4" v-if="type !== 'add'">
                    <el-form-item prop="whsj">
                        <template #label><vp-label zh="维护时间" en="Edit Time"/></template>
                        <span>{{formData.whsj}}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="sjjg">
                        <template #label><vp-label zh="事件经过" en="Incident Process"/></template>
                        <el-input
                            v-if="editable"
                            v-model="formData.sjjg"
                            :autosize="{ minRows: 3}"
                            type="textarea"
                            maxlength="1300"
                        />
                        <span v-else>{{formData.sjjg}}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="clff">
                        <template #label><vp-label zh="处理方法" en="Handling Method"/></template>
                        <el-input
                            v-if="editable"
                            v-model="formData.clff"
                            :autosize="{ minRows: 3}"
                            type="textarea"
                            maxlength="1300"
                        />
                        <span v-else>{{formData.clff}}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="4">
                    <el-form-item prop="fsjd">
                        <template #label><vp-label zh="发生阶段" en="Occur. Stage"/></template>
                        <DictSelect 
                            v-if="editable"
                            :lxid='2001'
                            :selectedId='formData.fsjd'
                            @dictSelected='(dict: any) => {formData.fsjd = dict}'
                            class="w100"
                        />
                        <span v-else>{{formData.fsjd}}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="sjzt">
                        <template #label><vp-label zh="状态" en="Status"/></template>
                        <DictSelect 
                            v-if="editable"
                            :lxid='2003'
                            :selectedId='formData.sjzt'
                            @dictSelected='(dict: any) => {formData.sjzt = dict}'
                            class="w100"
                        />
                        <span v-else>{{formData.fsjd}}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="sjxz">
                        <template #label><vp-label zh="事件性质" en="Nature"/></template>
                        <DictSelect 
                            v-if="editable"
                            :lxid='2004'
                            :selectedId='formData.sjxz'
                            @dictSelected='(dict: any) => {formData.sjxz = dict}'
                            class="w100"
                        />
                        <span v-else>{{formData.fsjd}}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="4">
                    <el-form-item prop="bsjufbs">
                        <template #label><vp-label zh="报送局方" en="Submit To CAAC"/></template>
                        <el-select v-if="editable" v-model="formData.bsjufbs" class="w100">
                            <el-option label="是 YES" :key="1" :value="1"></el-option>
                            <el-option label="否 NO" :key="0" :value="0"></el-option>
                        </el-select>
                        <span v-else>{{formData.bsjufbs === 1 ? '是 YES' : formData.bsjufbs === 0 ? '否 NO' : ''}}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="bsjiafbs">
                        <template #label><vp-label zh="报送甲方" en="Submit To Party A"/></template>
                        <el-select v-if="editable" v-model="formData.bsjiafbs" class="w100">
                            <el-option label="是 YES" :key="1" :value="1"></el-option>
                            <el-option label="否 NO" :key="0" :value="0"></el-option>
                        </el-select>
                        <span v-else>{{formData.bsjiafbs === 1 ? '是 YES' : formData.bsjiafbs === 0 ? '否 NO' : ''}}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item>
                        <template #label><vp-label zh="关联报告" en="Associate Reports"/></template>
                        <vp-table
                            :data="formData.reports" 
                            highlight-current-row 
                            row-key="id"
                        >
                        <el-table-column v-if="editable" :label="$t('item.operation')" width="80" align="center">
                            <template #header>
                                <el-button circle @click="handleChooseReport"><SvgIcon name="ele-Plus"></SvgIcon></el-button>
                            </template>
                            <template #default="scope">
                                <el-button circle @click="handleDeleteReport(scope.$index)"><SvgIcon name="ele-Minus"></SvgIcon></el-button>
                            </template>
                        </el-table-column>
                        <el-table-column 
                            prop="bh" 
                            show-overflow-tooltip 
                            min-width="100"
                        >
                            <template #header><vp-label zh="报告编号" en="Report No."/></template>
                            <template #default="scope">
                                <el-link type="primary" @click="viewReport(scope.row)">{{ scope.row.bh }}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column 
                            prop="bgrq" 
                            show-overflow-tooltip
                            min-width="110"
                        >
                            <template #header><vp-label zh="报告日期" en="Report Date"/></template>
                        </el-table-column>
                        <el-table-column 
                            prop="sfd" 
                            show-overflow-tooltip 
                            min-width="100"
                        >
                            <template #header><vp-label zh="事发地点" en="Incident Location"/></template>
                        </el-table-column>
                        <el-table-column 
                            prop="sjms" 
                            show-overflow-tooltip 
                            min-width="160"
                        >
                            <template #header><vp-label zh="事件描述" en="Incident Desc."/></template>
                        </el-table-column>
                        <el-table-column 
                            prop="clqk" 
                            show-overflow-tooltip 
                            min-width="200"
                        >
                            <template #header><vp-label zh="事件后处置情况" en="Post-Incident Disposal Status"/></template>
                        </el-table-column>
                        </vp-table>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="bz">
                        <template #label><vp-label zh="备注" en="Remark"/></template>
                        <el-input
                            v-if="editable"
                            v-model="formData.bz"
                            :autosize="{ minRows: 3}"
                            type="textarea"
                            maxlength="1300"
                        />
                        <span v-else>{{formData.bz}}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="csgz">
                        <template #label><vp-label zh="措施跟踪" en="Measures Tracking"/></template>
                        <el-input
                            v-if="editable"     
                            v-model="formData.csgz"
                            :autosize="{ minRows: 3}"
                            type="textarea"
                            maxlength="1300"
                        />
                        <span v-else>{{formData.csgz}}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
        </vp-card>

        <FileListCard
            class="mb4"
            :attachmentList="formData.attachments"
            :readOnly="!editable"
            @attachmentListEmit="formData.attachments = $event">
        </FileListCard>
        <AirportAndPlatformDialog  ref="airportAndPlatformDialogRef"></AirportAndPlatformDialog>
        <ChooseReport ref="chooseReportRef" @confirm="handleReportConfirm"></ChooseReport>
    </el-form>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs } from 'vue'
import validateUtils from '/@/utils/validateUtils';
import { verifiyNumberInteger, verifyCnAndSpace } from '/@/utils/toolsValidate';
import VpAircraftTypeSelect from '/@/components/vp/aircraftType/VpAircraftTypeSelect.vue';
import AircraftSelect from '/@/components/vp/aircraft/VpAircraftSelect.vue';
import FileListCard from '/@/components/vp/file/VpFileListCard.vue';
import DictSelect from '/@/components/vp/dict/VpDictSelect.vue';
import ChooseReport from './ChooseReport.vue';
import { useRouter } from 'vue-router';

export default defineComponent({
    name:'abnormalList',
    props: {
        type: {
            type: String,
            default: 'add',
        }
    },
    components: { FileListCard, DictSelect, ChooseReport, AircraftSelect, VpAircraftTypeSelect },
    setup(props) {
        const state = reactive({
            loading: false,
            saveLoading: false,
            csid: '',
            csmc: '',
            formData:{
                id: '',
                bh: '',
                sjrq: '',
                fjid: '',
                fjzch: '',
                fjjx: '',
                sjjg: '',
                clff: '',
                sjzt: '',
                sjxz: '',
                fsjd: '',
                sfdid: '',
                sfdmc: '',
                sfdlx: null,
                bsjufbs: null,
                bsjiafbs: null,
                bz: '',
                csgz: '',
                reports: [],
                attachments: [],
            },
            formRules:{
                sjrq: [validateUtils.notNull],
            },
		});

        const editable = computed(() => {
            return props.type === 'add' || props.type === 'edit';
        })

        const initFormData = ()=>{
            state.formData = {
                id: '',
                bh: '',
                sjrq: '',
                fjid: '',
                fjzch: '',
                fjjx: '',
                sjjg: '',
                clff: '',
                sjzt: '',
                sjxz: '',
                fsjd: '',
                sfdid: '',
                sfdmc: '',
                sfdlx: null,
                bsjufbs: null,
                bsjiafbs: null,
                bz: '',
                csgz: '',
                reports: [],
                attachments: [],
            }
        }

        const editDialogRef = ref();
        const formRef = ref();
        const airportAndPlatformDialogRef = ref();
        const chooseReportRef = ref();
        const router = useRouter();
        /**
         * 设置页面数据
         */
        const setData = (formData: any) => {
            initFormData();
            state.formData = {
                ...state.formData,
                ...formData,
            };
        }

        /**
         * 获取页面数据
         * @param zt 状态
         */
        const getData = (): Promise<any>=>{
            let promise = new Promise((resolve, reject) => {
                formRef.value.validate((valid: boolean) => {
                    if (valid) {
                        resolve({
                            ...state.formData,
                        });
                    } else {
                        reject();
                    }
                })
            })
            return promise;
        }
        const chooseAcType = (obj: any) =>{
            if(obj.jx != state.formData.fjjx) {
                state.formData.fjid = "";
                state.formData.fjzch = "";
                state.formData.fjjx = obj.jx;
            }
        }
        /**
         * 选择飞机
         * @param obj 飞机
         */
        const chooseAircraft = (obj: any) => {
            state.formData.fjid = obj.fjid;
            state.formData.fjzch = obj.fjzch;
        }

        /**
         * 查询基地和机场
         */
        const searchBaseAndAirport = () => {
            airportAndPlatformDialogRef.value.handleOpen({
                selectedId : state.formData.sfdid,
                callback:(data :any)=>{
                    state.formData.sfdid = data.id;
                    state.formData.sfdmc = data.mc;
                    state.formData.sfdlx = data.lx;
                }
            });
        };

        const handleChooseReport = ()=>{
            chooseReportRef.value.handleOpen();
		}

        const handleReportConfirm = (data: any) => {
            var oldList = state.formData.reports;
            var addList = data.filter((obj:any) => {
                return !oldList.some((report:any) => {return (report.bcbgid && obj.bcbgid && report.bcbgid === obj.bcbgid) || 
                    (!report.bcbgid && !obj.bcbgid && report.bgid && obj.bgid && report.bgid === obj.bgid)});
            });
            state.formData.reports = oldList.concat(addList);
		}

        const handleDeleteReport = (index: number)=>{
            state.formData.reports.splice(index, 1);
		}

        const viewReport = (row: any) => {
            if(row.lx == 10){
                router.push({
                    name: "viewAbnormalFlight",
                    params: {
                        id: row.bgid,
                    },
                })
            }else if(row.lx == 20 && !row.bcbgid){
                router.push({
                    name: "viewAbnormalMaintenance",
                    params: {
                        id: row.bgid,
                    },
                })
            }else if(row.lx == 20 && row.bcbgid){
                router.push({
                    name: "viewAbnormalMaintenanceSupplement",
                    params: {
                        id: row.bcbgid,
                    },
                })
            }else if(row.lx == 30 && !row.bcbgid){
                router.push({
                    name: "viewAbnormalOther",
                    params: {
                        id: row.bgid,
                    },
                })
            }else if(row.lx == 30 && row.bcbgid){
                router.push({
                    name: "viewAbnormalOtherSupplement",
                    params: {
                        id: row.bcbgid,
                    },
                })
            }        
        }    

        return {
            ...toRefs(state),
            ...toRefs(props),
            editDialogRef,
            formRef,
            setData,
            getData,
            chooseAircraft,
            verifiyNumberInteger,
            verifyCnAndSpace,
            airportAndPlatformDialogRef,
            searchBaseAndAirport,
            editable,
            handleChooseReport,
            handleDeleteReport,
            chooseReportRef,
            handleReportConfirm,
            viewReport,
            chooseAcType,
        }
    },
})
</script>